<template>
  <div class="number" v-if="columns.length">
    <van-picker
      ref="picker"
      class="picker"
      show-toolbar
      :title="title"
      :columns="columns"
      @change="onChange"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      
    </van-picker>
  </div>
</template>
 
<script>
export default {
  name: 'Number',
  props: {
    title: {
      type: String,
      default: ''
    },
    nextLongYear: {
      type: Number,
      default: 1
    },
    prevLongYear: {
      type: Number,
      default: 64
    }
  },
  data () {
    return {
      columns: [],
      selects: ''
    }
  },
  mounted () {
    this.initTimeFn()
    console.log(this.columns)
  },
  computed: {
    years() {
      const currentDate = new Date();
      
      let startYear = currentDate.getFullYear() - this.prevLongYear; // 起始年份
      let endYear = currentDate.getFullYear() + this.nextLongYear; // 结束年份
      
      return Array.from({ length: (endYear - startYear + 1)}, (_, i) => startYear + i).map(key => key + "年").reverse();
    },
    
    months() {
      return [...Array(12).keys()].map((i) => i = ++i + "月");
    },
    
   
  },
  methods: {
    initTimeFn () {
      const date = new Date(this.years.shift().slice(0, -1), this.months[0].slice(0, -1), 0);
      this.columns = [
       {
          values: this.years,
          defaultIndex: 0,
        },
        // 第二列
        {
          values: this.months,
          defaultIndex: 0,
        },
        {
          values: Array.from({ length: date.getDate()}, (_, i) => i = ++i + "日"),
          defaultIndex: 0,
        }
      ]
      let [year, month, day] = this.columns
      console.log(year, month, day, 'year, month, day')
      this.selects = `${year.values[year.defaultIndex].slice(0, -1)}-${this.prefixInteger(month.values[month.defaultIndex].slice(0, -1), 2)}-${this.prefixInteger(day.values[day.defaultIndex].slice(0, -1), 2)}`

      console.log(this.columns)
      console.log()
    },
    onCancel () {
      this.$emit('on-cancel', this.selects)
    },
    onConfirm () {
      this.$emit('on-success', this.selects)
    },
    onChange (picker, values, idx) {
      
      this.selects = `${values[0].slice(0, -1)}-${this.prefixInteger(values[1].slice(0, -1), 2)}-${this.prefixInteger(values[2].slice(0, -1), 2)}`
      if (idx === 1) {
        const date = new Date(values[0].slice(0, -1), values[1].slice(0, -1), 0);
        this.columns[2] = {
          values: Array.from({ length: date.getDate()}, (_, i) => i = ++i + "日"),
          defaultIndex: 1,
        }
        console.log('234234234')
        this.selects =`${values[0].slice(0, -1)}-${this.prefixInteger(values[1].slice(0, -1), 2)}-01`
        this.$refs.picker.setColumnIndex(2, 0)
      }
     
      // picker.setColumnValues(1, this.checkTime[values[0]])
    },
    prefixInteger(num, length) {
      return (Array(length).join('0') + num).slice(-length);
    }
  }
}
</script>
 
<style lang="scss">
.number {
  font-family: WDCH-Regular;
  .picker {
    border: 1px solid pink;
  }
}
.txt {
  font-size: 16px;
}
</style>